﻿<!doctype HTML>

<html>

<head>

    <title>Wextr</title>
    <link rel="shortcut icon" href="bilder/thumbnail.png"/>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/prototyp5.css" />
    <link rel="stylesheet" href="css/about.css" />
    <link rel="stylesheet" href="css/alternativ-startsida.css" />
    
    <!-- LÄGGER DET HÄR SOM NOTE SÅ LÄNGE...
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src='http://81.230.7.80:9999/socket.io/socket.io.js'></script>
    <script type='text/javascript'>
        var     chatrooms           = [], //title, au, id, color
                serverIP            = '81.230.7.80',
                tempName            = "";

        if(typeof inChat === 'undefined') { //bajs
            var inChat = false;
        } else if(inChat === true) {
            console.log("hej");
            inChat = false;
        }
        
        if(typeof socket === 'undefined' || !socket.socket.connected) { var socket = io.connect('http://'+serverIP+':9999'); }
        
        socket.on("contactRequest", function (data) {
            //rensa grejjen 
                for(var i = 0; i < data.length; i += 1) {
                    $("#account-logged-notifications-main-nav").prepend(data[i] + "<br/>");
                }
        });
        
        function joinChat (chat_name) { //funktion för att joina en chat, skickar användarnamn och chat-namn till servern som skickar tillbaka addID (se addID längre ner)
            var chatExists = true;
            for(var x = 0; x < chatrooms.length; x+= 1) {
                if(chatrooms[x].indexOf(chat_name) > -1) {
                    chatExists = false;
                }
            }
            
            if(chatExists) {
                socket.emit('joinChat', { chatRoom: chat_name });
            } else {
                $('#chat_room-test').append('<span class="10" style="display: block"><div class="message-container"><div class="message-author"><a href="profile.html?name=SERVER" target="_blank">SERVER</a></div><div class="message-image" style="background-image:url(bilder/server1.png);"><div class="message-account"></div></div><div class="message-overlay">I watch you when you sleep.</div>You have already joined ' + chat_name + '</div></span>');
                $('#chat_room-test').scrollTop($('#chat_room-test').prop("scrollHeight"));
            }
	}
        
        $(document).ready(function () {
            socket.on('updatePopular', function (popularChats) {
		$('#main-nav-most-popular').html('');
		
		var k = 0;
		
		popularChats.forEach(function (popularChat) {
                    $('#main-nav-most-popular').append('<h3>' + (k+1) + '. <a class="slideoutnav" id="' + popularChat + '" href="#main-nav">#' + popularChat + '</a></h3>');
                    k += 1;
                });
            });
            
            socket.on('updateDiscover', function (data) {
                $('#main-nav-nearby').html('');
                
                var y = 0;
                data.list.forEach(function (discovered) {
                    $('#main-nav-nearby').append('<h3>' + (y+1) + '. <a class="slideoutnav" id="1' + discovered + '" href="#main-nav">#' + discovered + '</a></h3>');
                    y += 1;
                });
            });
            
                    $("body").on('click', '.slideoutnav', function() {
                        console.log("click");
                        if (inChat) {
                            var chatname = $(this).attr('id');
                            joinChat(chatname);
                        } else {
                            tempName = $(this).attr('id');
                            $('#startsida-content').css('top', '175px');
                            $('#startsida-content').load('chat-room.html');
                        }
                    });
        });
    </script>
    <script src='js/login.js'></script>
    <script src='js/validate.js'></script>
    <script src='js/validateToken.js'></script>
    
    SLUT PÅ NOTE-->
    
</head>


<body>

<!--START NAVIGATION FROM LEFT -->
    
    <nav class="main-nav" id="main-nav"></nav>

<!--END NAVIGATION FROM LEFT -->

<!--START ACCOUNT LOGIN FROM RIGHT -->
    
    <div id="loginContainer"></div>

<!--END ACCOUNT LOGIN FROM RIGHT -->

<!--START HEADER -->

    <div id="header">
        <div id="header-box-nav">
            <a href="#main-nav" class="open-menu">
                <img src="bilder/menu-alt-48.png" onmouseover="this.src='bilder/menu-alt-48-blue.png'" onmouseout="this.src='bilder/menu-alt-48.png'">
            </a>
        </div>
        <div id="loginBox">
        <a href="#account-login-main-nav" class="open-menu">
            <div id="account-login-header-box-nav">        
                LOG IN  
            </div>
        </a>
        </div>
    </div>

<!--END HEADER -->

<!--START PAGE-CONTENT -->


<div id="homepage-search-container">
    <div id="homepage-content">
        <div class="wrap">
            <div id="homepage-content-logo-box"></div>
                                <div id="homepage-content-search-box">
                                    <form class="homepage-form" id='main_search'>
                                        <input type="text" id='main_search_box' autocomplete="off" placeholder="Topic" required>
                                        <button type="submit"></button>
                                    </form>
                                </div>

                                <div id="homepage-content-howto-box">
                                    <h3 class="homepage-content-howto-box">Search for a topic to chat about with other people around the world.</h3>
                                </div>

        </div>
        
    </div>
</div>

<div id="homepage-info-wrapper">
    <div class="wrap">
        <div id="homepage-info-box-1">
            <div class="homepage-info-box-layer" id="layer-box-1">
                <h1 id="black">Connect with fascinating people that share an interest for things that you love. </h1>
            </div>
            <div id="box-1-arrow-right"></div>
        </div>
        <div id="homepage-info-box-2"></div>
        <div id="homepage-info-box-3">
            
        </div>
        <div id="homepage-info-box-4">
            <div class="homepage-info-box-layer" id="layer-box-4">
                <h1 id="black">Share your knowledge, learn from others or argument for your opinion.</h1>
            </div>
            <div id="box-4-arrow-left"></div>
        </div>
    </div>
</div>







<!--END PAGE-CONTENT -->

<!--START SCRIPT -->

<!-- Lägger som note så länge

        <script> 
            
                $(function(){
              $("#main-nav").load("leftMenu.html"); 
            });
            validateToken(function(data) {
                if(data.bool){
                    $("#loginBox").load("loggedInHeader.html"); 
                } else {
                    $("#loginContainer").load("login.html"); 
                }
            });
            
        </script>
    <script type="text/javascript" src="js/search.js"></script>

Slut på note-->

<!--END SCRIPT -->

</body>

</html>

